<template>
  <div class="container">
    <el-tabs
      v-model="activeName"
      type="border-card"
    >
      <el-tab-pane
        label="我的留言"
        name="note"
      >
        <MyNoteCard
          v-for="(myWallCard,index) in myWallCards"
          :key="index"
          :card="myWallCard"
        ></MyNoteCard>

      </el-tab-pane>
      <el-tab-pane
        label="我的提问"
        name="request"
      >
        <MyReqCard
          v-for="(myReqCard,index) in myReqCards"
          :key="index"
          :reqCard="myReqCard"
        ></MyReqCard>
      </el-tab-pane>
      <el-tab-pane
        label="我的回答"
        name="answer"
      >
        <ReqComCard
          v-for="(myReqCom,index) in myReqComments"
          :key="index"
          :myReqCom='myReqCom'
        ></ReqComCard>

      </el-tab-pane>
      <el-tab-pane
        label="我的求助"
        name="helps"
      >
        <MyHelpCard
          v-for="(item,index) in myHelpCards"
          :key="index"
          :card="item"
        ></MyHelpCard>

      </el-tab-pane>
    </el-tabs>
  </div>

</template>

<script>
import MyNoteCard from "./myNoteCards";
import MyReqCard from "./myReqCard";
import ReqComCard from "./myComCards/index.vue";
import MyHelpCard from "./myHelpCard";
import { mapState } from "vuex";
export default {
  data() {
    return {
      activeName: "note",
    };
  },
  methods: {},
  components: {
    MyNoteCard,
    MyReqCard,
    ReqComCard,
    MyHelpCard,
  },
  computed: {
    ...mapState({
      myWallCards: (state) => state.walls.myWallCards,
    }),
    ...mapState({
      myReqCards: (state) => state.request.myReqCards,
    }),

    ...mapState({
      myReqComments: (state) => state.request.myReqComments,
    }),
    ...mapState({
      myHelpCards: (state) => state.goods.myHelpCards,
    }),
  },
  mounted() {
    this.$store.dispatch("initMyCards");
    this.$store.dispatch("getMyReqCard");
    this.$store.dispatch("getMyComReq");
    this.$store.dispatch("initMyHelpCards");
  },
};
</script>
<style lang="less" scoped>
.container {
  display: flex;
  flex-wrap: wrap; /* 当超出容器宽度时自动换行 */

  width: 100%;
  justify-content: center;
  align-content: flex-start;
  overflow: hidden;
}

// tap宽
::v-deep .el-tabs--border-card {
  width: 100%;
  height: 100%;
  background-color: #f9f9f9;
  padding-top: -20px;
}
::v-deep .el-tabs__nav-scroll {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #b2bcff;
}
::v-deep .el-tabs__item {
  font-size: 1.2em;
  border-radius: 20px;
}
::v-deep .el-tab-pane {
  display: flex;
  position: relative;
  flex-wrap: wrap; /* 当超出容器宽度时自动换行 */
  gap: 10px; /* 设置子元素之间的间距 */
  height: 100%;
  justify-content: center;
  align-items: flex-start;
}
::v-deep .el-tabs__content {
  height: 100%;
  overflow-y: auto;
  padding: 2px;
}

/*定义滚动条宽度和颜色*/
::v-deep .el-tabs__content::-webkit-scrollbar {
  width: 4px;
}

::v-deep .el-tabs__content::-webkit-scrollbar-track {
  background: #d2f3ef;
}

::v-deep .el-tabs__content::-webkit-scrollbar-thumb {
  background: #b2b2ff;
}

/* 悬停效果 */
::v-deep .el-tabs__content::-webkit-scrollbar-thumb:hover {
  background: #c9c9ec;
}
//留言卡片
/*卡牌图片底部评论 */
.card-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 25px;
}
.icon {
  width: 25px;
  height: 25px;
}
.cardUserInfo {
  display: flex;
  justify-content: center;
  align-items: center;
}
.uesrInfo-img {
  width: 60px;
  height: 60px;
  overflow: hidden;
  border: 1px solid #f3f690;
  border-radius: 100%;
  margin-right: 25px;
}
.uesrInfo-img > span {
  padding: 2px;
}

.icon {
  width: 25px;
  height: 25px;
}
.cardUserInfo {
  display: flex;
  justify-content: center;
  align-items: center;
}
.uesrInfo-img {
  width: 60px;
  height: 60px;
  overflow: hidden;
  border: 1px solid #f3f690;
  border-radius: 100%;
  margin-right: 25px;
}
.uesrInfo-img > span {
  padding: 2px;
}
.comLike {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
  margin-right: 5px;
}

.like {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 5px;
}
.like > span {
  opacity: 0.5;
}

/* 结束 */
.comment {
  display: flex;
  justify-content: center;
  align-items: center;
}
.comment > span {
  opacity: 0.5;
}

.userWords {
  display: flex;
  background-color: #acdccec3;
  margin-top: 15px;
  width: 90%;
  height: 65%;
  padding: 10px;
  justify-content: center;
  align-items: center;
  position: relative;
  box-sizing: border-box;
  max-width: 300px;
  font-family: cursive;
  font-size: 20px;
  border-radius: 10px;
  background: #fff;
  background-image: linear-gradient(#f5f5f0 1.1rem, #ccc 1.2rem);
  background-size: 100% 1.2rem;
  line-height: 1.2rem;
  padding: 0.5rem 0.2rem 0.1rem 0.1rem;
}

.userWords > span {
  width: 90%;
  height: 90%;
  overflow: auto; /* 溢出隐藏 */
  text-align: center;
}
/*定义滚动条宽度和颜色*/
.userWords-span::-webkit-scrollbar {
  width: 4px;
}

.userWords-span::-webkit-scrollbar-track {
  background: #d2f3ef;
}

.userWords-span::-webkit-scrollbar-thumb {
  background: #94f0f0;
}

/* 悬停效果 */
.userWords-span::-webkit-scrollbar-thumb:hover {
  background: #5cd0f4;
}

.container {
  display: flex;
  position: relative;
  flex-wrap: wrap; /* 当超出容器宽度时自动换行 */
  gap: 20px; /* 设置子元素之间的间距 */

  justify-content: center;
  align-items: flex-start;
}
.card {
  position: relative;
  background: #98c5e5;
  display: flex;
  width: 300px;
  height: 370px;
  max-height: 370px;
  cursor: pointer;
  transition: all 0.3 ease;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: visible;
  box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.3);
  margin-bottom: 50px;
}

.product {
  content: "";
  display: flex;
  width: 97%;
  height: 70%;
  background-color: #faf3e8;
  z-index: 1;
}
.product > img {
  width: 100%;
  height: 100%;
}
.product p {
  font-size: 17px;
  text-align: center;
  color: #181818;
  line-height: 150px;
}

.shine {
  position: relative;
  top: 0;
  left: 0;
  width: 190px;
  height: 236px;
  overflow: hidden;
}

.shine-effect {
  position: absolute;
  top: -15%;
  left: 150%;
  width: 25px;
  height: 400px;
  background-color: #ffffff2a;
  box-shadow: 0 0 15px 2px #ffffff42;
  transform: rotate(25deg);
  transition: all 1s cubic-bezier(0.78, 0.02, 0.5, 0.77);
  z-index: 5;
}

.pattern-1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 125px;
  height: auto;
  z-index: 2;
}

.pattern-2 {
  position: absolute;
  top: -10%;
  left: -10%;
  width: 200px;
  height: auto;
  z-index: 2;
}

.tree {
  position: absolute;
  bottom: 1%;
  right: -2%;
  width: 100px;
  height: auto;
  transform-origin: 100% 0;
  transform: rotate(-15deg);
  z-index: 3;
}

.tape-1 {
  position: absolute;
  top: -15%;
  left: 2%;
  width: 35px;
  height: auto;
  filter: drop-shadow(1px 3px 3px #18181870);
  z-index: 6;
}

.tape-2 {
  position: absolute;
  top: -15%;
  right: 2%;
  width: 35px;
  height: auto;
  filter: drop-shadow(1px 3px 3px #18181870);
  z-index: 6;
}

.card:hover {
  transform: scale(1.02);
}

.card:hover .tape-1 {
  transform: scale(1);
}

.card:hover .tape-2 {
  transform: scale(1);
}

.card:hover .shine-effect {
  left: -100%;
}

.card:active {
  transform: scale(1.02) translate(0, 5%);
}

.card:active .tape-1 {
  transform-origin: 0 100%;
  transform: scaleY(1.1);
}

.card:active .tape-2 {
  transform-origin: 0 100%;
  transform: scaleY(1.1);
}

.fil-tape-10 {
  fill: #a99473;
}

.fil-tape-11 {
  fill: #bbaa88;
  fill-rule: nonzero;
}

.fil-tape-20 {
  fill: #a99473;
}

.fil-tape-21 {
  fill: #bbaa88;
  fill-rule: nonzero;
}

.fil-pattern-1 {
  fill: #f3dfde;
}

.fil-pattern-2 {
  fill: #333333;
  fill-rule: nonzero;
}

.fil0 {
  fill: #333333;
}
/* 卡片留言区 */

/* 有图片 */
</style>;
